<div #mapViewNode class="esri-view">
  <div class="legend-box">
    <div class="legend-control">
      <i class="ag_remove" [title]="l('pick_up')" [hidden]= "!legendShow" (click)="legendShow = !legendShow"></i>
      <i class="ag_web_asset" [title]="l('expand')" [hidden]= "legendShow" (click)="legendShow = !legendShow"></i>
    </div>
    <form nz-form class="ant-advanced-search-form" [hidden]= "!legendShow" [formGroup]="validateForm">
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24">{{l('container_no')}}</nz-form-label>
            <nz-form-control>
              <nz-form-text>{{model.containerCode}}</nz-form-text>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="launchsiteId">{{l('start_site')}}</nz-form-label>
            <nz-form-control *ngIf='!siteId'>
              <nz-select formControlName="launchsiteId" [(ngModel)]="model.launchsiteId"
                         (ngModelChange)="getCompanyForStart()"
                         [nzPlaceHolder]="l('please_select_site')">
                <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
              </nz-select>
            </nz-form-control>
            <nz-form-control *ngIf='siteId'>
              <nz-select formControlName="launchsiteId" [(ngModel)]="model.launchsiteId" nzDisabled
                         (ngModelChange)="getCompanyForStart()"
                         [nzPlaceHolder]="l('please_select_site')">
                <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="startWarehouseId">{{l('start_company')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="startWarehouseId" [(ngModel)]="pathModel.startWarehouseId"
                         (ngModelChange)="getPathList()" [nzPlaceHolder]="l('select_warehousing_company')">
                <nz-option *ngFor="let option of startCompanyList" [nzValue]="option.id"
                           [nzLabel]="option.houseName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="destinationsiteId">{{l('end_site')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="destinationsiteId" [(ngModel)]="model.destinationsiteId"
                         (ngModelChange)="getCompanyForEnd()"
                         [nzPlaceHolder]="l('please_select_site')">
                <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="endWarehouseId">{{l('end_company')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="endWarehouseId" [(ngModel)]="pathModel.endWarehouseId" (ngModelChange)="getPathList()"
                         [nzPlaceHolder]="l('select_warehousing_company')">
                <nz-option *ngFor="let option of endCompanyList" [nzValue]="option.id"
                           [nzLabel]="option.houseName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="routeId">{{l('path')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="routeId" [(ngModel)]="model.routeId"
                         (ngModelChange)="getPath()"
                         [nzPlaceHolder]="l('please_select_path')">
                <nz-option *ngFor="let option of pathList" [nzValue]="option.id" [nzLabel]="option.pathNo"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="limitTime">{{l('limit_time')}}({{l('hours')}})</nz-form-label>
            <nz-form-control>
              <nz-input-number formControlName="timeLimit" id="timeLimit" [(ngModel)]="model.timeLimit" 
              [nzPlaceHolder]="l('please_enter_limit')"
              [nzStep]="1"[nzMin]='0.01' [nzMax]='10000'></nz-input-number>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24" class="control-area">
          <nz-form-item nzFlex>
            <button nz-button [nzType]="'primary'" (click)="ceratePath()">{{l('save')}}</button>
            <button nz-button [nzType]="'default'" (click)="return()">{{l('return')}}</button>
          </nz-form-item>
        </div>
      </div>

    </form>
  </div>

</div>
